<script setup>
import {FileMapping} from '@/utils/resource'
import {confirm} from '@/utils/element-helper'
import util from '@/utils/util'
import {nextTick, ref} from "vue";
import {useRouter} from "vue-router";

const router = useRouter()
const loading = ref(false)
const dataSource = ref([])

loadTree()

async function loadTree() {
  loading.value = true
  let res = await FileMapping.tree()
  dataSource.value = res.data
  await nextTick()
  loading.value = false
}

function handleAddFolder(index, row, parent) {
  if (row) {
    router.push({path: "/fileMapping/folder/new/" + row.id + "/" + row.name})
  } else {
    router.push({path: "/fileMapping/folder/new/"})
  }
}

function handleEdit(index, row, id) {
  let parentName = util.getParentName(dataSource.value, row.parent)
  router.push({path: `/fileMapping/folder/${row.id}/${row.parent}/${parentName}`})
}

function handleChild(index, row, parent) {
  router.push({path: "/fileMapping/new/" + row.id + '/' + row.name})
}

function handleDelete(index, row, id) {
  confirm({_content: "删除文件将一并删除所有子文件, 是否继续?"}, () => FileMapping.del(row.id), (resp) => this.loadTree())
}

function formatterFileSize(size) {
  return util.renderSize(size)
}
</script>
<template>
  <el-form :inline="true">
    <el-form-item style="float: right">
      <el-button type="success" @click="handleAddFolder" icon="CirclePlus" plain>新增根目录</el-button>
    </el-form-item>
  </el-form>
  <el-table
      :data="dataSource"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      v-loading="loading"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
        prop="name"
        label="名称"
        align="left"
        width="200">
      <template #default="scope">
        <el-icon>
          <component :is="scope.row.folder===1?'Folder':'Files'"/>
        </el-icon>
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column
        prop="size"
        label="大小"
        align="center"
        width="100">
      <template #default="scope">
        {{ scope.row.folder === 1 ? '' : formatterFileSize(scope.row.size) }}
      </template>
    </el-table-column>
    <el-table-column
        prop="key"
        align="center"
        label="key值">
    </el-table-column>
    <el-table-column
        prop="url"
        align="center"
        label="路径">
      <template #default="scope">
        <a class="single-text-ellipsis" :title="scope.row.url">{{ scope.row.url }}</a>
      </template>
    </el-table-column>
    <el-table-column
        prop="updated"
        align="center"
        label="更新时间">
    </el-table-column>
    <el-table-column label="操作" width="360" align="center">
      <template #default="scope">
        <el-button
            type="warning"
            size="small"
            @click="handleEdit(scope.$index, scope.row, scope.row.id)">{{scope.row.folder ===1?'编辑':'查看'}}
        </el-button>
        <el-button v-if="scope.row.folder ===1"
                   type="success"
                   size="small"
                   icon="ArrowDown"
                   @click="handleChild(scope.$index, scope.row,scope.row.parent)">添加文件</el-button>
        <el-button v-if="scope.row.folder ===1"
                   type="success"
                   size="small"
                   @click="handleAddFolder(scope.$index, scope.row, scope.row.id)">添加子目录
        </el-button>
        <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.$index, scope.row, scope.row.id)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
</style>
